<template>
	<view  class="border-top border-light-secondary p-3">
		
		<view class="rounded py-4 flex flex-column justify-center align-center bg-main">
			<text class="text-white font-sm mb-2">当前金额</text>
			<text class="font-weight-bold text-white money">50</text>
		</view>
		
		<view class="border-top border-light-secondary my-3"></view>
		
		<view>
			<text class="font-sm text-muted">请选择充值金币</text>
		</view>
		
		<view class="flex flex-wrap invest-money">
			<view class="p-2 invest-item" v-for="(item, index) in list" :key="index">
				<view v-if="item.price > 0" class="border rounded flex flex-column justify-center align-center item" :class="activeIndex === index ? 'border-main' : ''" @click="chooseCoin(index)">
					<view class="flex align-center">
						<text class="iconfont text-warning mr-1 icon-bizhongguanli"></text>
						<text class="font-md font-weight-bold">{{item.coin}}</text>
					</view>
					<text class="font text-light-muted">￥{{item.price}}</text>
				</view>
				
				<view v-else class="border rounded flex flex-column justify-center align-center item" @click="chooseCoin(index)">
					<text class="font text-light-muted">自定义</text>
				</view>
				
			</view>
		</view>
	    
		<view class="position-fixed left-0 right-0 bottom-0 border-top flex p-3 align-center invest-bottom">
			<view class="flex align-center">
				<text class="iconfont text-warning mr-1 icon-bizhongguanli"></text>
				<text class="font-md font-weight-bold">{{price}}</text>
			</view>
			<view class="bg-main rounded flex align-center justify-center ml-auto btn" @click="pay">
				<text class="text-white font-md">去充值</text>
			</view>
		</view>
		
		<uni-popup ref="popup" type="dialog">
		    <uni-popup-dialog mode="input"  title="自定义充值" placeholder="充值金额" message="成功消息" :duration="2000" :before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
		</uni-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeIndex: 0,
				price: 0,
				list: [{
					coin: 10,
					price: 10
				},{
					coin: 20,
					price: 20
				},{
					coin: 30,
					price: 30
				},{
					coin: 50,
					price: 50
				},{
					coin: 100,
					price: 100
				},{
					price: 0
				}]
			}
		},
		onLoad() {
			let price = this.list[this.activeIndex].price
			if (price > 0) {
				this.price = price
			}
		},
		methods: {
			chooseCoin(index) {
				this.activeIndex = index
				let price = this.list[index].price
				if (price > 0) {
					this.price = price
				} else {
					this.$refs.popup.open()
				}
			},
			close() {
				this.$refs.popup.close()
			},
			confirm(value) {
				if (!value) {
					return uni.showToast({
						title: "请输入金额",
						icon: 'none'
					})
				}
				this.price = value
				this.$refs.popup.close()
			},
			pay() {
				this.$H.post('/gift/wxpay', {
					price: this.price
				}, {
					token: true
				}).then(orderInfo => {
					uni.requestPayment({
						provider: "wxpay",
						orderInfo:orderInfo,
						success: (res) => {
							uni.showToast({
								title: '充值成功'
							});
							uni.navigateBack({
								delta: 1
							});
							this.$store.dispatch('getUserInfo')
						},
						fail: (err) => {
							uni.showModal({
								title: '提示',
								content: '支付失败',
								showCancel: false,
							});
						}
					})
				}).catch(err => {
					
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.money {
		font-size: 60rpx;
	}
	.invest-money {
		margin-left: -20rpx;
		margin-right: -20rpx;
		
		.invest-item {
			width: 33.3%; 
			box-sizing: border-box;
			
			.item {
				height: 130rpx;
			}
		}
	}
	.invest-bottom {
		height: 100rpx;
		
		.btn {
			height: 70rpx;
			width: 150rpx;
		}
	}
</style>
